<template>
    <Echart id="leftCenter" :options="options" class="left_center_inner" ref="charts" />
</template>

<script>
    import {
        currentPOST
    } from 'api/modules'
    import qs from 'qs'
    export default {
        data() {
            return {
                options: {},
                pageflag: true,
                timer: null
            };
        },
        created() {
            this.getData()
        },
        mounted() {},
        beforeDestroy() {
            this.clearData()
        },
        methods: {
            clearData() {
                if (this.timer) {
                    clearInterval(this.timer)
                    this.timer = null
                }
            },
            getData() {
                this.pageflag = true
                currentPOST('/ipac-apic/bigScreen/instrumentWorthCount',
                qs.stringify({limit: 6})).then(res => {
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.init(res.data)
                            this.switper()
                        })
                    } else {
                        this.pageflag = false
                    }
                })
            },
            //轮询
            switper() {
                if (this.timer) {
                    return
                }
                let looper = (a) => {
                    this.getData()
                };
                this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
                let myChart = this.$refs.charts.chart
                myChart.on('mouseover', params => {
                    this.clearData()
                });
                myChart.on('mouseout', params => {
                    this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
                });
            },
            init(data) {
                console.log('原值', data)
                let instrument = []
                let arrs = []
                let infrastructure = []
                for(let i=0; i<data.instrument.length; i++) {
                    instrument.push(data.instrument[i].worth)
                    arrs.push({
                        instCname: data.instrument[i].cname,
                        instWorth: data.instrument[i].worth,
                        infrastCname: data.infrastructure[i].cname,
                        infrastWorth: data.infrastructure[i].worth
                    })
                }
                for(let i=0; i<data.infrastructure.length; i++) {
                    infrastructure.push(data.infrastructure[i].worth)
                }
                this.options = {
                    color: ["#33A1DB", "#ECA444"],
                    tooltip: {
                        trigger: 'axis',
                        confine: true,
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(e) {
                            let item = arrs[e[0].dataIndex]
                            return `仪器:(${item.instCname})${item.instWorth}
                            <br/> 设施:(${item.infrastCname})${item.infrastWorth}`
                        }
                    },
                    grid: {
                       top: '12%',
                       left: '10%',
                       right: '4%',
                       bottom: '12%',
                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '万元',
                        splitLine: {
                            show: false
                        },
                        axisLine:{
                            show: true,
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }],
                    series: [{
                            name: '仪器',
                            type: 'bar',
                            barWidth: 20,
                            label: {
                                show: true,
                                position: 'top', // 顶部显示
                                formatter: '{c}', // 显示数据值
                                color:'#fff',
                                fontStyle: 'normal'
                            },
                            data: instrument
                        },
                        {
                            name: '设施',
                            type: 'bar',
                            barWidth: 20,
                            label: {
                                show: true,
                                position: 'top', // 顶部显示
                                formatter: '{c}', // 显示数据值
                                color:'#fff',
                                fontStyle: 'normal'
                            },
                            data: infrastructure
                        },
                    ]
                }
            }
        },
    };
</script>
<style lang='scss' scoped>
</style>